<template>
  <div class="gift">
    <div class="giftBox">
      <van-icon class="giftIcon" name="like-o" />
      <div>
        <span>免费送咖啡</span>
      <p>邀请新朋友，你和他每人免费喝一杯</p>
      </div>
      <van-button class="btn" type="info" size="mini">免费送</van-button>
    </div>
    <div class="giftBox">
      <van-icon class="giftIcon" name="like-o" />
      <div>
        <span>免费送咖啡</span>
      <p>邀请新朋友，你和他每人免费喝一杯</p>
      </div>
      <van-button class="btn" type="info" size="mini">免费送</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Button } from 'vant'

Vue.use(Icon)
Vue.use(Button)
export default {
  name: 'gift-index'
}
</script>

<style lang="scss" scoped>
.giftBox{
  margin-top: 8px;
display: flex;
// background-color: yellow;
height: 77px;
justify-content: space-between;
align-items: center;
padding: 0 30px;
.giftIcon{
  font-size: 30px;
  // margin-right: 15px;
  opacity: 0.3;
}
p{
  font-size: 13px;
  color:#ccc;
  margin-top: 7px;
}
.btn{
  border-radius: 10px;
  width: 60px;
}
}
</style>
